<template>
	<uni-popup ref="popup" type="center"  :is-mask-click="false">
		<view class="content-wrapper">
			<view class="title">{{isRate ? '已评分过' : '壁纸评分'}}</view>
			<view class="rate-wrapper">
				<uni-rate disabledColor="#FFCA3E" :disabled="isRate" @change="changeRate" class="rate" size="30" allowHalf v-model="rate"/>
				<text class="font">{{rate}}分</text>
			</view>
			<view class="btn-wrapper">
				<button :disabled="isRate" class="btn" @click="submit">{{isRate ? '已评分过' : '确认评分'}}</button>
			</view>
			<view class="close-btn" @click="close">
				<uni-icons class="icon" type="closeempty" size="24" ></uni-icons>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {apiGetSetupScore} from '@/api/index.js'
	import {
		ref
	} from 'vue';
	const popup = ref()
	const imgInfo = ref({})
	const isRate = ref(false)
	const open = (info) => {
		imgInfo.value = info
		if(info.userScore){
			isRate.value = true
		}
		rate.value = info.userScore 
		popup.value.open()
	}
	const close = () => {
		
		popup.value.close()
		setTimeout(()=>{
			isRate.value = false
		},300)
	}
	defineExpose({
		open
	})
	
	const rate = ref(0)
	const emit = defineEmits(['rateSuccess'])
	const changeRate = (e)=>{
		console.log('e',e)
		rate.value = e.value
	}
	const submit = async()=>{
		let data = {
			classid:imgInfo.value.classid,
			wallId:imgInfo.value._id,
			userScore:rate.value,
		}
		const res = await apiGetSetupScore(data)
		if(res.errCode == 0){
			uni.showToast({
				title:'评分成功'
			})
			
			emit('rateSuccess',rate.value)
		}
		
		close()
	}
	
</script>

<style lang="scss" scoped>
	.content-wrapper{
		width: 500rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		.close-btn{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			.icon{
				color: $text-font-color-2 !important;
			}
		}
		.title{
			color: $text-font-color-2;
			font-size: 26rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}
		.rate-wrapper{
			display: flex;
			justify-content: center;
			align-items: center;
			.rate{
				font-size: 40rpx;
			}
			.font{
				font-size: 30rpx;
				margin-left: 40rpx;
				color: #FFCA3E;
			}
		}
		.btn-wrapper{
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			.btn{
				width: 200rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1rpx solid #888;
				border-radius: 10rpx;
				
			}
		}
	}
</style>
<style lang="scss">
	.uni-icons{
		color: $text-font-color-2 !important;
	}
</style>